<template>
  <views>
    <!-- 企业 -->
    <div v-if="this.$store.state.terrace==1">
      <!-- 使用流程 -->
      <viewTitle :title="title_list[0]" :border="true"></viewTitle>
      <!-- 列表 -->
      <!-- <div class="flow-list">
        <div
          v-for="(item,index) in title_list_flow"
          class="flow-listItem flex center flexR flexJp"
          v-bind:key="index"
        >
          <div class="flex center">
            <div class="num">{{item.num}}</div>
            <div class="list-content">
              <div class="title">{{item.title}}</div>
              <div class="content">{{item.referral}}</div>
            </div>
          </div>
        </div>
      </div> -->

      <!-- 功能 -->
      <div class="features-list flex flexR flexJ">
        <div v-for="(item,index) in features_list" class="features-listItem cp" v-bind:key="index" @click="toNav(index)">
          <img :src="item.imgUrl" alt />
          <div class="title">{{item.title}}</div>
          <div class="introduce">{{item.introduce}}</div>
        </div>
      </div>

      <!-- 余额 交易金额 -->
      <div class="deal_money flex flexR flexJ">
        <div class="deal_money_item">
          <viewTitle :title="title_list[1]" :border="true"></viewTitle>
          <div class="sign_service">
            <div class="sign_service_title">共{{facilitator_count}}个签约服务商</div>
            <div class="price">￥{{$splitK(account_balance)}}</div>
            <div class="view_details"></div>
          </div>
        </div>
        <!-- 这里有个插件渲染时间差的问题，当接收到后台数据的时候再将数据发送给表格查看才能展示 -->
        <div class="deal_money_item" v-if="day_data.length > 0">
            <zxEchart :title="'交易金额'"  :day="day_data" :trade_money="money_data" :pass_style="'width: 90%;height:300px;'"></zxEchart>
        </div>
      </div>
    </div>
    <!-- 服务商 -->
    <div v-if="this.$store.state.terrace==3">
      <div class="wecome_png">
        <el-image
            style="width: 450px; height: 450px"
          :src="require('@/assets/home/1ea519bc6ca5a3a493db05298156cb1.png')"
        ></el-image>
         <div class="hint">欢迎登录——服务商端</div>
      </div>
    </div>
    <!-- 代理商 -->
    <div v-if="this.$store.state.terrace==2">
        <div class="agent_item">
          <div class="agent_item_title bg_a">已签约企业数量</div>
          <div class="agent_item_content">{{total_sign_num}}个</div>
        </div>
      <div class="agent_item">
        <div class="agent_item_title bg_b">累计充值金额</div>
        <div class="agent_item_content">￥{{total_charge}}</div>
      </div>
      <div class="agent_item">
        <div class="agent_item_title bg_c">累计出款金额</div>
        <div class="agent_item_content">￥{{total_pay}}</div>
      </div>
      <div class="agent_item">
        <div class="agent_item_title bg_d">累计开票金额</div>
        <div class="agent_item_content">￥{{total_invoice}}</div>
      </div>

      <!-- 图表 -->
      <div  class="erchats" v-if="agent_excel.day && agent_excel.day.length > 0">
          <zx-echart :title="title" 
          :day="agent_excel.day" :charge_money="agent_excel.charge_money" :dispatch_money="agent_excel.pay_money" :invoice_money="agent_excel.invoice_money"
          :select_list="select_list" @selectChange="selectChange"
          :pass_style="'width: 90%;height:500px;'"
          ></zx-echart>
      </div>

      <div class="wecome_png bgnone">
        <!--<el-image-->
           <!--style="width: 450px; height: 450px"-->
          <!--:src="require('@/assets/home/1ea519bc6ca5a3a493db05298156cb1.png')"-->
        <!--&gt;</el-image>-->
        <div class="hint">欢迎登录——代理商端</div>
      </div>
    </div>
  </views>
</template>




<script>
export default {
  name: "indexs",
  data() {
    return {
      title:'近期交易',
      title_list: ["使用流程", "账户余额"], //   标题栏
      title_list_flow: [
        //   流程
        {
          num: 1,
          title: "账户充值",
          referral: "为账户充值相关费用"
        },
        {
          num: 2,
          title: "人员录入",
          referral: "录入人员基本信息"
        },
        {
          num: 3,
          title: "核算费用",
          referral: "核算人员费用"
        },
        {
          num: 4,
          title: "批量打款",
          referral: "上传表格批量打款"
        }
      ],
      features_list: [
        //    模块
        {
          imgUrl: require("@/assets/home/52a77b323209389abd1b904ceb1844c.png"),
          title: "账户充值",
          introduce: "为账户充值相关费用",
          path:"/enterprise_recharge_guide",
          opt:{
            title: "账户管理",
            title1: "充值流程",
            index: "2-2",
            path: "/enterprise_recharge_guide",
            id_: null
          }
        },
        {
          imgUrl: require("@/assets/home/89ce218959bae3ce5b8d6d5a41ae7c4.png"),
          title: "人员签约",
          introduce: "录入人员基本信息",
          path:"/enterprise_office_personlist",
          opt:{
            title: "人事管理",
            title1: "人员记录",
            index: "1-2",
            path: "/enterprise_office_personlist",
            id_: null       
          }
        },
        {
          imgUrl: require("@/assets/home/fb18a8228c64fb933cf284c1d277a29.png"),
          title: "付款查询",
          introduce: "查询付款费用",
          path:"/gen_log",
          opt:{
            title: "付款查询",
            title1: "付款查询",
            index: "3-1",
            path: "/gen_log",
            id_: null            
          }
        },
        {
          imgUrl: require("@/assets/home/8d32f0ac7508dbe3c963f7c3f6c04fe.png"),
          title: "批量打款",
          introduce: "上传表格批量打款",
          path:"/enterprise_gen_batch",
          opt:{
              title: "付款管理",
              title1: "批量付款",
              index: "3-2",
              path: "/enterprise_gen_batch",
              id_: null          
          }
        }
      ],
      facilitator_count: 0, //签约服务商数量
      account_balance: 0, //账号余额
      day_data: [], //表格日期数组（横坐标）
      money_data: [], //表格交易金额数组（从坐标）
      total_sign_num:0,
      total_charge:0,
      total_pay:0,
      total_invoice:0,
      agent_excel:{               //代理商图表数据
        day: [],                  //横坐标日期
        charge_money : [],     //充值线
        pay_money: [],       //代发线
        invoice_money : []    //发票线
      },
      select_list: [{label:'近7天', value: 0}, {label:'近1个月', value: 1}, {label:'近3个月', value: 2}, {label:'全部', value: 3}],        //图表选择列表          
      select_value: 0,      //选择近期交易类型
      
      
    };
  },
  mounted() {
    if (this.$store.state.terrace == 1) {
      this.getWelcome();
    }
    if (this.$store.state.terrace == 2) {
      this.getAgentIndex();
      this.getAgentExcel();
    }

  },
  methods: {
    //获取首页数据
    getWelcome() {
      let { code, msg, data } = this.$api.sendSync(this.$mapapi.e_welcome);
      if (code != 200&&code!=501) {
        this.$message.error(msg);
        return;
      }
      this.facilitator_count = data.account.facilitator_count;
      this.account_balance = data.account.account_balance;
      this.day_data = data.trade.date;
      this.money_data = data.trade.money;
    },
    //获取首页图表数据
    getAgentExcel(){
      let {code, msg, data} = this.$api.sendSync(this.$mapapi.a_agentExcel, {range_time: this.select_value});
      if(code != 200){
        return  this.$message.error(msg);
      }
      this.agent_excel.day = data.day;      //横坐标日期
      this.agent_excel.charge_money = data.charge_money;     //充值线
      this.agent_excel.pay_money = data.pay_money;        //代发线
      this.agent_excel.invoice_money = data.invoice_money;    //发票线
    },

    getAgentIndex(){
        let { code, msg, data } = this.$api.sendSync(this.$mapapi.awelcome);
        if (code != 200&&code!=501) {
            this.$message.error(msg);
            return;
        }
        this.total_sign_num = data.total_sign_num;
        this.total_charge = data.total_charge;
        this.total_pay = data.total_pay;
        this.total_invoice = data.total_invoice;
        console.log(data);
    },
    toNav(val){
        //  批量打款  - 批量付款
        //  账户充值  -  充值流程
        //  人员录入  -  人员记录
        //  核算费用  -  一键付款
        let {path,opt}=this.features_list[val]||{};
        this.$parent.toRoute(path,opt)
    },

    selectChange(val){
      console.log('come parent', val);
      this.select_value = val;
      this.getAgentExcel();

    }

  }
};
</script>








<style lang="less"  :scope="true">
.views .bgnone{
  background: none;
}
.agent_item{
  width: 254px;
  height: 104px;
  margin: 0px 16px 10px;
  text-align: center;
  display: inline-block;
  .agent_item_title{
    width: 254px;
    height: 52px;
    font-family: 'Arial Negreta', 'Arial';
    line-height: 52px;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #fff;
  }
  .agent_item_content{
    width: 254px;
    height: 52px;
    font-family: 'Arial Negreta', 'Arial';
    line-height: 52px;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    background-color: #fff;
  }
  .bg_a{
    background-color: #5D9CEC;
  }
  .bg_b{
    background-color: #7067BA;
  }
  .bg_c{
    background-color: #35BD99;
  }
  .bg_d{
    background-color: #F86C6B;
  }
}
.wecome_png {
  background: #ffffff;
  padding: 15px;
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
  .hint{
        height: 55px;
        line-height: 55px;
        text-align: center;
        color: #333333;
  }
}
.flow-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  background: #ffffff;
  border-top: 1px solid #f2f2f2;
  .num {
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    background: #5b9ffd;
    color: #ffffff;
    border-radius: 50%;
    margin-right: 15px;
  }
  .title {
    font-size: 14px;
    color: #000000;
  }
  .content {
    font-size: 14px;
    color: #aeaeae;
  }
  .list-content {
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .flow-listItem {
    width: 25%;
  }
}
.features-list {
  margin: 20px auto;
  .features-listItem {
    width: 24%;
    height: 200px;
    background: #ffffff;
    text-align: center;
    align-items: center;
    img {
      margin: 25px auto 20px auto;
    }
    .introduce {
      font-size: 14px;
      color: #aeaeae;
      margin-top: 10px;
    }
    .title {
      font-size: 14px;
      color: #000000;
    }
  }
}
.deal_money {
  margin: 20px auto;
  .deal_money_item {
    width: 49%;
    height: 330px;
    background: #ffffff;
    .sign_service {
      margin: 0px 3%;
      height: 285px;
      background: #ffffff;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .sign_service_title {
        font-size: 16px;
        color: #8d8d8d;
      }
      .price {
        margin: 0 auto;
        font-size: 45px;
        font-weight: 400;
        color: #000000;
      }
      .view_details {
        width: 120px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #4e88f1;
        // border: 1px solid #4e88f1;
        border-radius: 5px;
        font-weight: 400;
      }
    }
  }
}

.erchats{
    background-color: #fff;
    margin-top: 50px;
    width: 100%;
    height: 550px;
}
</style>